<template>
  <svg v-if="isIconFont" :key="icon" :style="getStyle" class="k-icon" aria-hidden="true">
    <use :xlink:href="`#${icon}`"></use>
  </svg>
  <el-icon v-else class="k-icon" :size="size">
    <Component :is="icon"></Component>
  </el-icon>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import '@/assets/fonts/iconfont.js';
/** k-icon */
defineOptions({ name: 'KIcon' });
// props
interface Props {
  icon: string;
  size?: number | string;
}
const props = withDefaults(defineProps<Props>(), {
  icon: '',
  size: ''
});
const getStyle = computed(() => {
  if (props.size) return { fontSize: typeof props.size === 'string' ? props.size : props.size + 'px' };
  else return {};
});
const isIconFont = computed(() => {
  // 正则如果定义在computed之外则不会更新： 奇怪的问题
  const isIconFontReg = /^icon-.*/g;
  return isIconFontReg.test(props.icon);
});
</script>

<style lang="scss" scoped>
.k-icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;

  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
      normalize.css 中也包含这行 */
  overflow: hidden;

  /* 图标和文字相邻时，垂直对齐 */
  vertical-align: -.15em;

  // 防止点击出现外框
  outline: none;

  /* 通过设置 color 来改变 SVG 的颜色/fill */
  fill: currentcolor;
}
</style>
